<!--
 * @Author: Mcc
 * @Date: 2024-07-11 10:21:23
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-23 19:29:22
 * @FilePath: \ft-apply\src\view\join\SureJoin.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="home">
    <div class="header">
      <img src="../../assets/ui/img/index_top.png" alt="" />
    </div>
    <div class="content" style='margin-top: -30vh;position: relative;'>
      <commonLayout>
        <h3>参培确认</h3>
        <van-form @submit="onSubmit" rules='allRules' :scroll-to-error=true :validate-first=true>
          <van-cell-group inset>
            <van-field v-model="username" name="username" readonly label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名："
              placeholder="用户名" />
            <van-field v-model="cardType" :rules="allRules.cardType" name="cardType" is-link readonly label="证件类型："
              placeholder="证件类型" @click="cardTypePicker = true">

            </van-field>
            <van-popup v-model:show="cardTypePicker" round position="bottom">
              <van-picker :columns="cardTypeColumns" @cancel="cardTypePicker = false" @confirm="cardTypeConfirm" />
            </van-popup>
            <van-field v-model="cardCode" :rules="allRules.cardCode" name="cardCode" label="证件号："
              :formatter='cardFormatter' placeholder="证件号码" maxlength="18">
              <template #label>
                证件号：<van-icon name="question-o" @click="diloageTips()" />
              </template>
            </van-field>

            <van-field v-model="JoinTime" is-link readonly name="picker" label="参培时间：" placeholder="选择期数"
              @click="showPicker = true" :rules="allRules.JoinTime" />
            <van-popup v-model:show="showPicker" position="bottom">
              <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" style="border: none;">
              确定
            </van-button>
          </div>

        </van-form>
        <div class="tips">
          每人仅允许选择一次参培时间，提交成功后无法自助修改。如确有修改需求，请将修改原因发送到ftzhaopin@fangtian.me邮箱说明，或及时与对应HR沟通。
        </div>
      </commonLayout>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive, Ref } from 'vue';
import commonLayout from '../../components/CommonLayout.vue';

import { windowWidth } from 'vant/lib/utils';
import { showDialog, showToast } from 'vant';

import apis from '../../api/index';
import router from '../../router';

const { selectTrainingNumberList, selectCommonConfigDetail } = apis;

const clickStatus = JSON.parse(localStorage.getItem('clickStatus'));

//接口获取用户的信息 名字 证件类型和号码
const username = ref(clickStatus.userName);
const cardCode = ref("");
const cardType = ref("");

const JoinTime = ref('');
const showPicker = ref(false);
const cardTypePicker = ref(false);
const columns = ref([]);
const cardTypeColumns = ref()
const diloageTips = () => {
  showDialog({
    title: '证件号',
    allowHtml: true,
    messageAlign: 'left',
    message: `1、中国大陆籍请填写身份证信息，该信息作为身份识别的重要依据。<br />2、每人仅允许填写一次个人证件类型及证件号码。简历提交成功后无法自助修改。如确有修改需求，请将修改原因，新旧证件具体信息等证明材料发送到ftzhaopin@fangtian.me邮箱说明。<br />3、每人仅允许注册和使用一份简历应聘，在个人简历信息注册完成后，使用本人其他类型证件（如护照、港澳永久身份证、台胞证等）注册新简历的行为、或通过修改及编纂身份证号以新增注册简历的行为，将被视为重复注册和使用简历应聘。重复注册简历应聘的行为一经发现将取消当前面试和录用资格。 <br />4、若出现证件信息被占用的情况，请发邮件到ftzhaopin@fangtian.me邮箱说明。`,
  }).then(() => {
    // on closeable
  });

}
const cardTypeConfirm = ({ selectedOptions }) => {
  cardType.value = selectedOptions[0].text;
  cardTypePicker.value = false;
};
const cardFormatter = (value) => {
  // 这里仅用于格式化显示，不控制输入  
  return value.replace(/[\u4e00-\u9fa5]/, ''); //  
};
function renameKeys(data: any): any {
  if (data !== null && typeof data === 'object') {
    if (Array.isArray(data)) {
      return data.map(item => renameKeys(item));
    } else {
      const renamed = {} as any;
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          let newKey = key;
          switch (key) {
            case 'dateTime':
              newKey = 'text';
              break;
            case 'startTimeEndTime':
              newKey = 'text';
              break;
            case 'monthList':
              newKey = 'children';
              break;
            case 'numberList':
              newKey = 'children';
              break;
            // case 'trainingNumberId':
            //   newKey = 'value';
            //   break;
          }
          renamed[newKey] = renameKeys(data[key]);
          // 如果当前键是 "text"，则添加 "value" 并设置其值等于 "text"
          if (newKey === 'text') {
            renamed.value = renamed.trainingNumberId == null ? renamed.text : renamed.trainingNumberId;
          }
        }
      }
      return renamed;
    }
  }
  return data;
}

//text value
const getselectCommonConfigDetail = async (types: any) => {
  const res: any = await selectCommonConfigDetail({
    type: types,
  });
  const extractedData = res.data.map((job) => ({
    value: job.value,
    text: job.label,
  }));
  return extractedData;
};

const getTrainingNumberList = async () => {
  const CERTIFICATE = await getselectCommonConfigDetail("CERTIFICATE"); //证件类型
  cardTypeColumns.value = CERTIFICATE;
  const res = await selectTrainingNumberList({});
  const modifiedData = renameKeys(res.data);
  columns.value = modifiedData;
};
getTrainingNumberList()
//接口获取参培时间

const loginValidator = (val: any, rule: any) => {
  return new Promise((resolve, reject) => {
    if (val === "") {
      showToast({
        message: rule.message,
      })
    } else {
      return resolve(true);
    }
  });
}
const allRules = reactive<any>({
  JoinTime: [{ validator: loginValidator, message: '请选择期数' }],
  cardCode: [{ validator: loginValidator, message: '请选择证件号码' }],
  cardType: [{ validator: loginValidator, message: '请填写证件类型' }],
});
const checktrainingNumberId = ref();
const onConfirm = ({ selectedOptions }) => {
  JoinTime.value = selectedOptions[2].text;
  checktrainingNumberId.value = selectedOptions[2].trainingNumberId;
  showPicker.value = false;
};

const onSubmit = (values: any) => {
  router.push({
    path: '/train/agreement',
    query: {
      checktrainingNumberId: checktrainingNumberId.value,
      ...values
    },
  });
};

</script>

<style lang="less" scoped>
:root {
  --van-button-primary-background: #79C5EF;
}

:deep(.van-popover__content) {
  width: 90%;
}

#app {
  background: #ffffff !important;
}

img {
  width: 100%;
}

:deep(.van-picker-column) {
  flex: auto !important;

  &first-child {
    width: 100px !important;
  }
}

:deep(.van-swipe__indicator) {
  background: rgba(32, 158, 228, 0.8);
  width: 10px;
  height: 10px;
}

:deep(#layout) {
  background: #fff;
  padding: 0;
  box-shadow: 0px 0 0 rgba(255, 255, 255, 1);
}



h3,
.tips {
  margin: 28px 20px 10px 0px;
  padding-left: 20px;
}

.tips {
  font-size: 14px;
  color: #B3C0C8;
  margin: 10px 20px 10px 0px;
  line-height: 30px;
}

.content {
  height: 63vh;

  :deep(.van-button) {
    border-radius: 8px;
    background: #209EE4;
    border-radius: 10px 10px 10px 10px;
  }
}
</style>
